<template>
  <Drawer
      title="组件信息编辑"
      v-model="visible"
      width="450"
      :mask-closable="false"
      :styles="$PnUtil.buildDrawerStyleByHasFooter()">
    <Form ref="form" :label-width="90" :model="formData" :rules="ruleValidate">
      <FormItem label="id" prop="id" hidden>
        <Input v-model="formData.id"/>
      </FormItem>
      <FormItem label="所属分组" prop="type_id">
        <Select transfer v-model="formData.type_id" clearable>
          <Option v-for="item in compinfoTypes" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="归类" prop="classify">
        <Input v-model="formData.classify" placeholder="请输入归类名称"/>
      </FormItem>
      <FormItem label="组件文件名" prop="name">
        <Input v-model="formData.name" placeholder="请输入组件文件名"/>
      </FormItem>
      <FormItem label="组件别名" prop="alias_name">
        <Input v-model="formData.alias_name" placeholder="请输入组件别名"/>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input v-model="formData.remark"/>
      </FormItem>
      <FormItem label="激活" prop="enabled">
        <i-switch v-model="formData.enabled" true-value="1" false-value="0">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>
      <FormItem label="缩略图URI" prop="thumbnail_uri">
        <Input type="textarea" :rows="4" v-model="formData.thumbnail_uri"/>
      </FormItem>
    </Form>
    <DrawerFooter>
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
      <Button type="primary" @click="submitForm" :loading="loading">保存</Button>
    </DrawerFooter>
  </Drawer>
</template>

<script>
import ManageMixin from "@/mixin/ManageMixin";

export default {
  name: 'CompinfoForm',
  mixins: [ManageMixin],
  data() {
    return {
      visible: false,
      loading: false,
      compinfoTypes: [],
      formData: {
        id: '',
        type_id: '',
        classify: '',
        name: '',
        alias_name: '',
        remark: '',
        enabled: '0',
        thumbnail_uri: ''
      },
      ruleValidate: {
        type_id: [
          {required: true, message: '类别不能为空', trigger: 'blur'}
        ],
        classify: [
          {required: true, message: '归类不能为空', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '组件名称不能为空', trigger: 'blur'}
        ],
        alias_name: [
          {required: true, message: '组件别名不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    init(type, id, type_id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.formData.type_id = type_id
        if (type == 'edit') {
          this.$PnApi.CompinfoApi.getCompinfoById(id).then(result => {
            this.formData = this.recover(this.formData, result.data.payload)
          })
        }
        this.loadCompinfoTypes()
      })
    },
    loadCompinfoTypes() {
      this.$PnApi.CompinfoApi.getAllCompinfoType().then(result => {
        this.compinfoTypes = result.data.payload
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$PnApi.CompinfoApi.saveCompinfo(this.formData).then(result => {
            if (result.data.success) {
              this.visible = false
              this.$Message.success(result.data.message)
              this.$emit("refreshDataList")
            }else {
              this.$Message.error(result.data.message)
            }
            this.loading = false
          })
        }
      });
    }
  },
  computed: {}
}
</script>

<style scoped>

</style>
